<template>
  <div>
    <el-row align="middle" class="mytop" v-if="orders.length>0">
      <el-col :span="4">
        <el-input v-model="order.pId" placeholder="请输入订单号">
          <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <div v-for=" o in orders">
      <el-table border class="mytop" :data="o.ordersDetails" :span-method="objectSpanMethod">
        <el-table-column width="250">
          <template slot="header">
            订单号:{{o.pid}}
          </template>
          <template slot-scope="scope">
            <img :src="scope.row.shopInfo.imags[0].imagUrl"
                 width="80px" height="100px" alt="err">
          </template>
        </el-table-column>
        <el-table-column label="商品" prop="shopInfo.shopName"></el-table-column>
        <el-table-column label="单价(元)" prop="shopInfo.shopPrice"></el-table-column>
        <el-table-column label="数量" prop="buyQuantity"></el-table-column>
        <el-table-column label="商品操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isStorage==0 && scope.row.isReturn==0 && o.orderState=='o-6' "
                       @click="returnMoney(scope.row.id)" round>退款
            </el-button>
            <el-button v-if="scope.row.isStorage==2 && scope.row.isReturn==0"
                       @click="openWindow(scope.row.id)" round>退货
            </el-button>
            <el-tag type="warning" v-if="scope.row.isStorage==1">出库中</el-tag>
            <el-tag type="warning" v-if="o.orderState=='o-1'">等待付款</el-tag>
            <el-tag v-if="scope.row.isReturn==1">待商家确认退货</el-tag>
            <el-tag type="success" v-if="scope.row.isReturn==2">退款完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="实付款">
          {{o.sumPrice}}元
        </el-table-column>
        <el-table-column label="交易状态">
          <el-tag type="warning" v-if="o.orderState=='o-1'">待付款</el-tag>
          <el-tag type="success" v-if="o.orderState=='o-2'">待提货</el-tag>
          <el-tag type="success" v-if="o.orderState=='o-3'">已提货</el-tag>
          <el-tag type="success" v-if="o.orderState=='o-4'">全部退货</el-tag>
          <el-tag type="success" v-if="o.orderState=='o-5'">订单完成</el-tag>
          <el-tag type="success" v-if="o.orderState=='o-6'">已付款</el-tag>
          <el-tag type="success" v-if="o.orderState=='o-7'">交易关闭</el-tag>
          <el-tag type="success" v-if="o.orderState=='o-8'">已评价</el-tag>
          <br>
          <el-link type="primary" @click="openDetail(o.id)">订单详情</el-link>
        </el-table-column>
        <el-table-column label="货物状态">
          <template>
            <el-tag type="warning" v-if="o.goodsState=='g-1'">待发货</el-tag>
            <el-tag type="success" v-if="o.goodsState=='g-2'">出库中</el-tag>
            <el-tag type="success" v-if="o.goodsState=='g-3'">待收货</el-tag>
            <el-tag type="success" v-if="o.goodsState=='g-4'">待提货</el-tag>
            <el-tag type="success" v-if="o.goodsState=='g-5'">用户待确认</el-tag>
            <el-tag type="success" v-if="o.goodsState=='g-6'">已收货</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <div v-if="o.orderState=='o-1'">
              <el-button size="mini" type="primary" @click="pay(o.id,'o-6')">立即付款</el-button>
              <br>
              <el-button size="mini" @click="pay(o.id,'o-7')">取消订单</el-button>
            </div>
            <div>
              <el-button type="primary" v-if="o.orderState=='o-3'" @click="pay(o.id,'o-5')">确认收货</el-button>
              <br>
              <el-button size="mini" type="danger"
                         v-if="o.orderState=='o-7'  || o.orderState=='o-5' || o.orderState=='o-8' "
                         @click="del(o.id)">删除订单
              </el-button>
              <br>
              <el-button class="mytop" size="mini" v-if="o.orderState=='o-5'" @click="openEvaluate(o.id)">评价</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row class="mytop" v-if="orders.length>0">
      <el-col :span="4">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageno"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <div>
      <el-dialog
        :show-close="false"
        :visible.sync="dialogVisible"
        width="25%">
        <pay-money2 ref="payMoney2"></pay-money2>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogVisible2"
        :before-close="handleClose"
        width="50%">
        <add-return-shop ref="addReturnShop"></add-return-shop>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogVisible3"
        :before-close="handleClose3"
        width="50%">
        <evaluate-view ref="evaluateView"></evaluate-view>
      </el-dialog>
      <order-detail-view ref="orderDetailView"></order-detail-view>
    </div>
    <div>
      <el-empty v-if="orders.length==0" description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
  import PayMoney2 from "./PayMoney2";
  import AddReturnShop from "../returnShop/AddReturnShop";
  import EvaluateView from "./EvaluateView";
  import OrderDetailView from "./OrderDetailView";

  export default {
    name: "OrderView",
    data() {
      return {
        order: {uId: sessionStorage.getItem("id"), pid: "", orderState: ""},
        orders: [],
        pageno: 1,
        pagesize: 5,
        total: 1,
        rowspan: 0,
        dialogVisible: false, //付款窗口状态
        dialogVisible2: false, //退款窗口状态
        dialogVisible3: false, //评价窗口状态
      }
    },
    methods: {
      returnMoney(id) {
        //未发货直接退款
        this.$confirm('您确认退款吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios
            .post("returnMoney.action",{id:id})
            .then(res=>{
              if (res.data.code>0){
                this.$message.success(res.data.msg);
                this.getOrders();
              }else {
                this.$message.error(res.data.msg)
              }
            })
            .catch(err => {
              this.$message.error(err)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      pay(id, state) {
        //组装数据
        if (state == "o-6") {
          //付款操作
          this.dialogVisible = true;
          this.$nextTick(item => {
            this.$refs.payMoney2.getOrderById(id);
          });
        } else {
          //其它操作
          let order = {id: id, orderState: state}
          this.$axios
            .put("payOrder.action", order)
            .then(res => {
              if (res.data.code > 0) {
                this.$message.success(res.data.msg);
                this.getOrders();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(err => {
              this.$message.error(err)
            });
        }
      },
      openDetail(id) {
        //查看详情
        this.$refs.orderDetailView.dialogVisible = true;
        this.$nextTick(item => {
          this.$refs.orderDetailView.getData(id);
        })
      },
      openWindow(id) {
        //退款
        this.dialogVisible2 = true;
        this.$nextTick(item => {
          this.$refs.addReturnShop.form.odId = id;
          this.$refs.addReturnShop.getDetail();
        });
      },
      openEvaluate(id) {
        //评价
        this.dialogVisible3 = true;
        this.$nextTick(item => {
          this.$refs.evaluateView.getData(id);
        })
      },
      handleClose() {
        //退货关闭
        this.$nextTick(item => {
          this.$refs.addReturnShop.cancel();
        });
      },
      handleClose3() {
        //评价窗口关闭
        this.$nextTick(item => {
          this.$refs.evaluateView.cancel();
        });
      },
      del(oid) {
        this.$axios.delete("delOrder.action", {params: {id: oid}})
          .then(res => {
            if (res.data.code > 0) {
              this.$message.success(res.data.msg);
              this.getOrders();
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      getOrders() {
        var params = {};
        params["pageno"] = this.pageno;
        params["pagesize"] = this.pagesize;
        Object.keys(this.order).forEach(item => {
          params[item] = this.order[item];
        });
        this.$axios.get("order.action", {params: params})
          .then(res => {
            this.orders = res.data.records;
            this.total = res.data.total;
            this.orders.forEach(item => {
              item.ordersDetails.forEach(detail => {
                detail.shopInfo.imags[0].imagUrl = "http://127.0.0.1:9090/demo/" + detail.shopInfo.imags[0].imagUrl
              })
            })
          }).catch(err => {
          this.$message.error(err)
        });
      },
      search() {
        this.getOrders();
      },
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        //合并列
        if (columnIndex === 5) {
          if (rowIndex === 0) {
            let o1 = this.orders.find(item => item.id == row.pid);
            return {
              rowspan: o1.ordersDetails.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
        if (columnIndex === 6) {
          if (rowIndex === 0) {
            let o1 = this.orders.find(item => item.id == row.pid);
            return {
              rowspan: o1.ordersDetails.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
        if (columnIndex === 7) {
          if (rowIndex === 0) {
            let o1 = this.orders.find(item => item.id == row.pid);
            return {
              rowspan: o1.ordersDetails.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
        if (columnIndex === 8) {
          if (rowIndex === 0) {
            let o1 = this.orders.find(item => item.id == row.pid);
            return {
              rowspan: o1.ordersDetails.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      handleSizeChange(val) {
        //每页范围
        this.pagesize = val;
        this.getOrders();
      },
      handleCurrentChange(val) {
        //当前页
        this.pageno = val;
        this.getOrders();
      },
    },
    components: {
      PayMoney2, AddReturnShop, EvaluateView,
      OrderDetailView
    }
  }
</script>

<style scoped>
  .mytop {
    margin-top: 20px;
  }
</style>
